<template>
  <div class="ui_index"  >
    <!-- 头部导航 -->
    <div class="header_box">
      <div class="header">
        <div>
          <i class="iconfont icon-04" style="font-size:26px;" @click="show=true"></i>
        </div>
        <div>
          <span style="padding-left:5px;">蜂收部落</span>
        </div>
        <div class="header_right">
          <i class="iconfont icon-erweima1" style="font-size:26px; margin-right:5px;"></i>
          <i class="iconfont icon-liaotian" style="font-size:36px;"></i>
        </div>
      </div>
      <!-- 标签页 -->
      <div class="tabs">
        <span @click="goTo('/newtask')" :class="{on: '/newtask'===$route.path}">最新任务</span>
        <span @click="goTo('/going')" :class="{on: '/going'===$route.path}">进行中</span>
        <span @click="goTo('/price')" :class="{on: '/price'===$route.path}">废品查价</span>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="content_box">
      <router-view></router-view>
    </div>
    <!-- 左侧弹出层 -->
    <van-popup v-model="show" position="left">
      <div class="self_container">
        <div class="self" @click="goToLogin">
          <div class="self_img"><img src="../../asset/images/userimg.png" alt=""></div>
          <div class="self_text" v-if="!memberInfo">
            登录/注册
          </div>
          <div class="self_text" v-if="memberInfo" >
            <div>{{memberInfo.nickName}}</div>
            <div class="serial_No">{{memberInfo.mobileNo}}</div>
          </div>
          <div class="level_img"><img :src=level_img_src alt=""></div>
          <div class="right_tip"><img src="../../asset/images/rightTip@2x.png" alt="" @click="goGradenCenter"></div>
        </div>
        <div class="switch" v-if="memberInfo">
          <div v-if="checked">开工</div>
          <div v-else>未开工</div>
          <van-switch v-model="checked"/>
        </div>
        <div class="iconfont_content">
          <router-link class="font" :to="{path:'/historyorder'}">
            <div class="font_icon">
              <i class="iconfont icon-lishidingdan icon1"></i>
            </div>
            <div class="font_text">
              历史订单
            </div>
          </router-link>
          <router-link class="font" :to="{path:'/wastebill'}">
            <div class="font_icon">
              <i class="iconfont icon-feipinzhangben1  icon2"></i>
            </div>
            <div class="font_text">
              废品账本
            </div>
          </router-link>
          <router-link class="font" :to="{path:'/detail'}">
            <div class="font_icon">
              <i class="iconfont icon-qianbao icon2"></i>
            </div>
            <div class="font_text">
              我的钱包
            </div>
          </router-link>
          <router-link class="font" :to="{path:'/setmessage'}">
            <div class="font_icon">
              <i class="iconfont icon-weibiaoti- icon3"></i>
            </div>
            <div class="font_text">
              个人设置
            </div>
          </router-link>
          <router-link class="font" :to="{path:'/feedback'}">
            <div class="font_icon">
              <i class="iconfont icon-yijianfankui icon3"></i>
            </div>
            <div class="font_text">
              意见反馈
            </div>
          </router-link>
          <router-link class="font" :to="{path:'/aboutus'}">
            <div class="font_icon">
              <i class="iconfont icon-guanyu icon4"></i>
            </div>
            <div class="font_text">
              关于我们
            </div>
          </router-link>
          <a href="tel:18758896758" class="font">
            <div class="font_icon">
              <i class="iconfont icon-lianxiwomen icon4"></i>
            </div>
            <div class="font_text">
              联系我们
            </div>
          </a>
        </div>
        <div class="popup_img">
          <img src="../../asset/images/popupimg.png" alt="">
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 引入子组件 对应标签页内容
import newtask from "../newtask/NewTask";
import going from "../going/Going";
import price from "../price/Index";
import { mapGetters } from "vuex";
import { selectBeeUser, selectIntegralDetail } from 'services/beeUser';

export default {
  data() {
    return {
      show: false, // 左侧弹出层
      checked: true, // 侧边开关状态,true-开工,false-未开工
      memberInfo: {},
      score: 0,
      level_img_src: '',
      level_img_src_list: {
        blackIron: require('../../asset/images/blackIron@2x.png'),
        brass: require('../../asset/images/brass@2x.png'),
        silver: require('../../asset/images/silver@2x.png'),
        gold: require('../../asset/images/gold@2x.png'),
        platinum: require('../../asset/images/platinum@2x.png')
      }
    };
  },
  components: {
    newtask,
    going,
    price
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  created() {
    this.fetchDetail();
    this.fetchIntegralDetail();
  },
  methods: {
    goTo(path) {
      this.$router.replace(path);
    },
    goToLogin() {
      if (!this.memberInfo) {
        this.$router.push("./login");
      }
    },
    showTab(tab) {
      this.currentTab = tab; // tab 为当前触发标签页的组件名
    },
    fetchDetail() {
      const { userNo } = this.userInfo;
      selectBeeUser({ userNo }).then(({object}) => {
        this.memberInfo = object;
        console.info(this.memberInfo);
      });
    },
    fetchIntegralDetail() {
      const { userNo } = this.userInfo;
      selectIntegralDetail({ userNo, begin: 0, rows: 9999 }).then(({ object }) => {
        object.forEach((key, index) => {
          this.score += key.score;
        })
        // console.log(this.score);
        if(this.score >= 0 && this.score < 140) {
          this.level_img_src = this.level_img_src_list.blackIron;
        }else if(this.score >= 140 && this.score < 500) {
          this.level_img_src = this.level_img_src_list.brass;
        }else if(this.score >= 500 && this.score < 1100) {
          this.level_img_src = this.level_img_src_list.silver;
        }else if(this.score >= 1100 && this.score < 3700) {
          this.level_img_src = this.level_img_src_list.gold;
        }else if(this.score >= 3700) {
          this.level_img_src = this.level_img_src_list.platinum;
        }
      })
    },
    goGradenCenter(){
      this.$router.push('/gradencenter');
    }
  }
};
</script>

<style lang="less" scoped>
.ui_index {
  height: 100vh;
  .header_box {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    height: 200px;
    padding-top: 0px;
    .header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      // height: 128px;
      align-items: center;
      padding: 0 30px;
      color: #fff;
      font-size: 36px;
      background: #f7a427;
      .header_right {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
    .tabs {
      width: 100%;
      color: #5c5c5c;
      font-size: 28px;
      background: #fff;
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .on{
        color:#f7a427;
        border-bottom:3px solid #f7a427;
      }
    }
    span {
      height: 82px;
      line-height: 82px;
    }
    .current {
      border-bottom: 3px solid #f7a427;
      color: #f7a427;
    }
  }

  .content_box {
    height: 100%;
    padding-top: 190px;
  }
  .van-popup {
    height: 100%;
    width: 535px;
    .self_container {
      width: 100%;
      height: 100%;
      .self {
        display: flex;
        align-items: center;
        height: 210px;
        background: #2c2e34;
        border-bottom: 1px solid #cccccc;
        color: #fff;
        .self_img {
          width: 96px;
          height: 96px;
          margin-left: 30px;
        }
        .self_icon {
          font-size: 100px;
          line-height: 100px;
          color: #e3e3e3;
        }
        .self_text {
          display: flex;
          flex-flow: column nowrap;
          justify-content: center;
          align-items: flex-start;
          height: 100%;
          margin-left: 30px;
          color: #fff;
          font-size: 30px;
          font-weight: 100;
          .serial_No{
            font-size: 24px;
          }
        }
        .level_img {
          width: 52px;
          height: 66px;
          margin-left: 94px;
        }
        .right_tip {
          width: 16px;
          height: 24px;
          margin-left: 29px;
        }
      }
      .switch {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px;
        font-size: 32px;
      }
      .iconfont_content {
        padding-left: 30px;
      }
      .font {
        display: flex;
        align-items: center;
        color: #5d5d5d;
        margin: 50px 0;
        .font_icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          .iconfont {
            color: #8c8c8c;
            font-size: 40px;
          }
          .icon1 {
            color: #74cb73;
          }
          .icon2 {
            color: #74b9fd;
          }
          .icon3 {
            color: #f9963b;
          }
          .icon4 {
            color: #f96b75;
          }
        }
        .font_text {
          margin-left: 50px;
          color: #333;
          font-size: 30px;
          font-weight: 100;
        }
      }
      .popup_img {
        position: fixed;
        bottom: 0;
      }
    }
  }
}
</style>
